import { ref as g, onMounted as u, openBlock as a, createElementBlock as i, createElementVNode as t, normalizeStyle as m, toDisplayString as d, Fragment as h, renderList as b } from "vue";
import "./GoodsCardRowSmall.vue2.js";
import v from "../_virtual/_plugin-vue_export-helper.js";
const C = ["src", "alt"], R = { class: "goods-info" }, x = { class: "goods-label" }, w = { class: "goods-price" }, F = {
  __name: "GoodsCardRowSmall",
  props: {
    // 商品卡片的宽度
    width: { type: String, default: "23.3rem" },
    // 商品卡片的高度
    height: { type: String, default: "10rem" },
    // 商品卡片圆角
    borderRadius: { type: String, default: "1rem" },
    // 商品卡片背景颜色
    backgroundColor: { type: String, default: "#f7f9fa" },
    // 商品卡片中文字颜色
    fontColor: { type: String, default: "#333333" },
    // 商品卡片样式修改过度时间
    transitionTime: { type: String, default: "0.3s" },
    // 商品卡片鼠标悬浮时边框颜色
    borderColor: { type: String, default: "#67c23a" },
    // 商品卡片鼠标悬浮时阴影颜色
    boxShadowColor: { type: String, default: "#67c23a" },
    // 商品名称
    name: { type: String, default: "商品名称" },
    // 商品名文字大小
    nameFontSize: { type: String, default: "1rem" },
    // 商品名文本区域的宽度
    nameWidth: { type: String, default: "12rem" },
    // 商品名文本区域高度
    nameHeight: { type: String, default: "2.6rem" },
    // 商品名文本行高
    nameLineHeight: { type: String, default: "1.3rem" },
    // 商品名鼠标悬浮文字颜色
    nameHoverFontColor: { type: String, default: "#67c23a" },
    // 商品图片 src
    imgSrc: { type: String, default: "" },
    // 商品图片 alt
    imgAlt: { type: String, default: "商品图片" },
    // 商品图片容器高度
    imgBoxHeight: { type: String, default: "9rem" },
    // 商品图片容器宽度
    imgBoxWidth: { type: String, default: "9rem" },
    // 商品图片圆角
    imgBorderRadius: { type: String, default: "1rem" },
    // 商品价格
    price: { type: Number, default: 0 },
    // 商品价格文字大小
    priceFontSize: { type: String, default: "1.3rem" },
    // 商品价格文字颜色
    priceFontColor: { type: String, default: "#67c23a" },
    // 商品标签
    label: { type: Array, default: [] },
    // 商品标签颜色
    labelColor: { type: String, default: "#67c23a" },
    // 商品标签内边距
    labelPAdding: { type: String, default: "0.1rem" },
    // 商品标签右外边距
    labelMarginRight: { type: String, default: "0.35rem" },
    // 商品标签边框圆角
    labelBorderRadius: { type: String, default: "0.2rem" },
    // 商品标签文字大小
    labelFontSize: { type: String, default: "0.5rem" }
  },
  setup(r) {
    const e = r, c = {
      width: e.width,
      height: e.height,
      borderRadius: e.borderRadius,
      backgroundColor: e.backgroundColor,
      color: e.fontColor,
      transition: `all ${e.transitionTime}`
    }, f = {
      fontSize: e.nameFontSize,
      width: e.nameWidth,
      height: e.nameHeight,
      lineHeight: e.nameLineHeight
    }, n = {
      height: e.imgBoxHeight,
      width: e.imgBoxWidth,
      borderRadius: e.imgBorderRadius
    }, s = {
      fontSize: e.priceFontSize,
      color: e.priceFontColor
    }, y = {
      color: e.labelColor,
      border: `1px solid ${e.labelColor}`,
      marginRight: e.labelMarginRight,
      padding: e.labelPAdding,
      borderRadius: e.labelBorderRadius,
      fontSize: e.labelFontSize
    }, o = g(null);
    u(() => {
      o.value.addEventListener("mouseover", () => {
        o.value.style.border = `1px solid ${e.borderColor}`, o.value.style.boxShadow = `0 0 8px 1px ${e.boxShadowColor}`;
      }), o.value.addEventListener("mouseout", () => {
        o.value.style.border = "none", o.value.style.boxShadow = "none";
      });
    });
    const l = g(null);
    return u(() => {
      l.value.addEventListener("mouseover", () => {
        l.value.style.color = e.nameHoverFontColor;
      }), l.value.addEventListener("mouseout", () => {
        l.value.style.color = e.fontColor;
      });
    }), (z, B) => (a(), i("div", {
      class: "goods-card",
      style: c,
      ref_key: "goodsCardRef",
      ref: o
    }, [
      t("div", {
        class: "goods-img",
        style: n
      }, [
        t("img", {
          src: r.imgSrc,
          alt: r.imgAlt,
          style: m({ borderRadius: n.borderRadius })
        }, null, 12, C)
      ]),
      t("div", R, [
        t("p", {
          class: "goods-name",
          style: f,
          ref_key: "goodsNameRef",
          ref: l
        }, d(r.name), 513),
        t("div", x, [
          (a(!0), i(h, null, b(r.label, (S, p) => (a(), i("span", {
            key: p,
            style: y
          }, d(S), 1))), 128))
        ]),
        t("p", w, [
          t("span", {
            style: m({ color: s.color })
          }, "￥", 4),
          t("span", { style: s }, d(r.price), 1)
        ])
      ])
    ], 512));
  }
}, L = /* @__PURE__ */ v(F, [["__scopeId", "data-v-573b4b47"]]);
export {
  L as default
};
